<!-- 每月图片的集合 -->
<template>
  <div class="time-line">
    <div
      class="time-line-header"
      @mouseover="mouseOverAll"
      @mouseleave="mouseLeaveAll"
    >
      <el-checkbox
        style="height: 25px"
        :indeterminate="isIndeterminate"
        v-show="showCheckAllBox || checkedImgs.length > 0"
        v-model="checkAll"
        fill=""
        @change="handleCheckAllChange"
      >
        <h3 style="font-size: 25px">全选</h3>
      </el-checkbox>
      <span
        class="time-line-header-date"
        style="font-size: 28px; padding-left: 10px"
        >{{ date }}
      </span>
    </div>
    <el-checkbox-group v-model="checkedImgs" @change="handleCheckedImgsChange">
      <div class="time-line-imgs">
        <div class="images" v-for="(imgUrl, index) in imgsUrl" :key="index">
          <div
            :style="{
              width: imageWidths[index] + 'px',
              height: imageHeight + 'px',
            }"
            class="checkboxAndImg"
            @mouseover="mouseOver(index)"
            @mouseleave="mouseLeave"
          >
            <el-checkbox
              class="checkbox"
              :label="imgsId[index]"
              @change="pinSelect(index)"
              v-show="showCheckBox == index || selectedCount > 0"
            >
              <br />
            </el-checkbox>

            <el-image
              :style="{
                width: imageWidths[index] + 'px',
                height: imageHeight + 'px',
              }"
              lazy
              class="image"
              fit="contain"
              :src="imgUrl"
              :preview-src-list="imgsUrl"
            ></el-image>
            <div class="shadow" v-show="showCheckBox == index"></div>
          </div>
        </div>
      </div>
    </el-checkbox-group>
    <!-- <p>{{ checkedImgs }}</p> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
//import { mapState } from "vuex"
export default {
  //date 日期
  props: {
    date: {
      required: true,
      type: String,
    },
    imgsUrl: {
      required: true,
      type: Array,
    },
    imgsId: {
      required: true,
      type: Array,
    },
    orderIndex: {
      required: true,
      type: Number,
    },
  }, //分类信息元组
  data() {
    return {
      imageWidths: [],
      imageHeight: 220,
      checkedImgs: [], //被选择的图像id
      checkAll: false,
      isIndeterminate: true,
      showCheckBox: -1,
      showCheckAllBox: false,
      isPin: false,
      lastChecked: -1,
    };
  },
  computed: {
    ...mapGetters("photo", ["selectedCount"]),
  },
  mounted: function () {
    window.addEventListener("keydown", (code) => {
      // 这个是获取键盘按住事件
      if (code.key == "Shift") this.isPin = true;
    });
    window.addEventListener("keyup", (code) => {
      // 这个是获取键盘松开事件
      if (code.key == "Shift") this.isPin = false;
    });
  },
  beforeMount: function () {
    this.justify(this.imgsUrl);
  },
  methods: {
    pinSelect(index) {
      let checked = this.checkedImgs.indexOf(this.imgsId[index]) != -1;
      if (checked && this.isPin) {
        //console.log("已经按住shift并且选中", index);
        //将lastChecked和index之间全部加入checkedImgs
        let beg = Math.min(this.lastChecked, index);
        let end = Math.max(this.lastChecked, index);
        for (let cur = beg + 1; cur < end; cur++) {
          if (this.checkedImgs.indexOf(this.imgsId[cur]) == -1) {
            this.checkedImgs.push(this.imgsId[cur]);
          }
        }
        this.lastChecked = index;
      } else if (checked && !this.isPin) {
        //console.log("选中但未按住shift", index);
        this.lastChecked = index;
      } else {
        //console.log("取消选中", index);
      }
    },
    mouseOver(index) {
      this.showCheckBox = index;
    },
    mouseLeave() {
      this.showCheckBox = -1;
    },
    mouseOverAll() {
      this.showCheckAllBox = true;
    },
    mouseLeaveAll() {
      this.showCheckAllBox = false;
    },
    justify(imgArr) {
      this.imageWidths = [];
      for (var element of imgArr) {
        this.justifyImgWidth(element);
      }
    },
    justifyImgWidth(imgUrl) {
      let img = new Image();
      img.src = imgUrl;
      //console.log(img)
      let self = this;
      setTimeout(function () {
        if (img.naturalWidth) {
          self.imageWidths.push(
            parseInt((self.imageHeight / img.naturalHeight) * img.naturalWidth)
          );
          //console.log(img.naturalHeight)
        } else {
          self.imageWidths.push(
            parseInt((self.imageHeight / img.naturalHeight) * img.naturalWidth)
          );
          //console.log(img.naturalHeight)
        }
        // 这里就是处理的事件
      }, 200);
      //现代浏览器
    },
    handleCheckAllChange(val) {
      this.checkedImgs = val ? this.imgsId : [];
      this.isIndeterminate = false;
      let payload = {
        checkedImgs: this.checkedImgs,
        orderIndex: this.orderIndex,
      };
      this.$store.commit("photo/storeCheckedImgs", payload);
    },
    handleCheckedImgsChange() {
      let checkedCount = this.checkedImgs.length;
      this.checkAll = checkedCount === this.imgsUrl.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.imgsUrl.length;
      let payload = {
        checkedImgs: this.checkedImgs,
        orderIndex: this.orderIndex,
      };
      this.$store.commit("photo/storeCheckedImgs", payload);
    },
  },
};
</script >

<style lang="scss" scoped>
.time-line {
  margin-bottom: 10px;
}
.time-line-imgs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  background: whitesmoke;
}
.images {
  margin: 4px 2px 4px 2px;
}
.checkboxAndImg {
  position: relative;
}
.checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px 0px;
}
.shadow {
  width: 100%;
  height: 25px;
  background: rgba(99, 96, 96, 0.5);
  background-image: radial-gradient(
    to bottom,
    rgba(249, 249, 249, 0),
    rgba(0, 0, 0, 1)
  );
  position: absolute;
}

.image {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px 0px;
}
/deep/ .el-checkbox__inner {
  width: 20px !important;
  height: 20px !important;
}
/deep/ .el-checkbox__inner::after {
  height: 10px !important;
  left: 7px !important;
}
</style>

